<template>
  <div class="popup">
    <div class="show-title" >弹出位置</div>
     <div class="show-list">
       <div  v-for="(item,index) in list" :key='index' >
          <div class="show-item"  @click='showPopup(item.name)' >
              <div>{{item.desc}}</div>
              <div>></div>
          </div>
          <hr v-if="index<list.length-1" >
       </div>
     </div>
     <Rain-Popup :position='position' v-model="showVisible" >popup-show</Rain-Popup>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
  components: {

  }
})
export default class Home extends Vue {
  // data 
  position = 'bottom' 
  showVisible  = false
  list = [
    {name:'top',desc:'顶部弹出'},
    {name:'bottom',desc:'底部弹出'},
    {name:'left',desc:'左侧弹出'},
    {name:'right',desc:'右侧弹出'},
  ]
  // method
  showPopup(position:any){
   this.position = position
   this.showVisible = true
  }
  //mounted
  mounted() {
    const background: any = document.querySelector("body");
    background.setAttribute("style", "background-color:#f6f6f6");
  }
  //destoryed
  destroyed() {
    const background: any = document.querySelector("body");
    background.setAttribute("style", "background-color:#ffffff");
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/common.scss";
</style>
